<template>
<div class="query">
    <el-row :gutter="10">
        <el-col :span="2">
            <div class="grid-content bg-purple text-right">出险时间 :</div>
        </el-col>
        <el-col :span="6">
          <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间" style="width: 267px;">
          </el-date-picker>
        </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple text-right">起保日期 :</div>
      </el-col>
      <el-col :span="2.5" class="startAndEnd startDate">
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="2.5" class="startAndEnd">
        <el-date-picker
          v-model="value3"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <span style="position: absolute;top: 0;right: 138px;">-</span>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple text-right">终保日期 :</div>
      </el-col>
      <el-col :span="2.5" class="startAndEnd">
        <el-date-picker
          v-model="value2"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
      </el-col>
      <el-col :span="2.5" class="startAndEnd">
        <el-date-picker
          v-model="value3"
          type="date"
          placeholder="选择日期">
        </el-date-picker>
        <span style="position: absolute;top: 0;right: 138px;">-</span>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="2">
        <div class="grid-content bg-purple text-right">机构名称 :</div>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple text-right">保单号 :</div>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple text-right">投保人 :</div>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="2">
        <div class="grid-content bg-purple text-right">被保险人 :</div>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple text-right" style="line-height: 18px;">被保险人证件号:</div>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
      <el-col :span="2">
        <div class="grid-content bg-purple text-right" style="line-height: 18px;">被保险人证件类型 :</div>
      </el-col>
      <el-col :span="6" style="padding-right: 10px;">
        <div class="grid-content bg-purple">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </el-col>
    </el-row>
  <el-row :gutter="10" style="margin-top: 30px">
    <el-col :offset="2" :span="2"> <div class="grid-content bg-purple"><el-checkbox v-model="checked">查询有效保单</el-checkbox></div></el-col>
    <el-col :offset="8" :span="2" style="padding-right: 10px;">
      <div class="grid-content bg-purple">
        <el-button type="primary" plain>主要按钮</el-button>
      </div>
    </el-col>

  </el-row>
</div>
</template>

<script>
export default {
    name: "query-conditions",
    props: {},
    data: function () {
        return {
            value1: '',
            value2: '',
            value3: '',
            value4: '',
            value5: '',
            checked: true,
            input:'',
        };
    },
    computed: {},
    watch: {},
    mounted() {

    },
    methods: {}
};
</script>

<style lang="scss" scoped>
  .query{
    padding: 10px;
    background: white;
    .el-row{
      line-height: 36px;
      margin-bottom: 10px;
      .startAndEnd{
        .el-date-editor.el-input{
          width:130px;
        }
      }
    }
    .el-col{
      position: relative;
    }
  }
</style>
